<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <title>菜单展示 - 肯德基风格</title>
  <style>
    body {
      margin: 0;
      font-family: 'Helvetica Neue', sans-serif;
      background-color: #fff;
      color: #333;
    }

    .header {
      background-color: #d9232e;
      color: white;
      text-align: center;
      padding: 1rem;
      font-size: 1.5rem;
    }

    .category-bar {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1rem 2rem;
      background-color: #f9f9f9;
      border-bottom: 1px solid #eee;
    }

    .category-button {
      padding: 0.5rem 1rem;
      border: 1px solid #d9232e;
      background-color: white;
      color: #d9232e;
      border-radius: 20px;
      cursor: pointer;
      font-size: 0.95rem;
      transition: all 0.2s ease;
    }

    .category-button:hover {
      background-color: #d9232e;
      color: white;
    }

    .dish-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      padding: 2rem;
    }

    .dish-card {
      border: 1px solid #eee;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      background-color: #fff;
      transition: transform 0.2s ease;
    }

    .dish-card:hover {
      transform: translateY(-5px);
    }

    .dish-image {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .dish-info {
      padding: 1rem;
      text-align: center;
    }

    .dish-name {
      font-size: 1.1rem;
      margin: 0.5rem 0;
      color: #222;
    }

    .dish-price {
      color: #d9232e;
      font-weight: bold;
    }
  </style>
</head>
<body>
<header class="header">
  <h1>我的优惠券</h1>
</header>
<div id="app">
  <!-- 加载状态 -->
  <div v-if="loading" class="text-center py-12">
    <i class="fa fa-spinner fa-spin text-d9232e text-2xl"></i>
    <p class="mt-2">正在加载优惠券...</p>
  </div>

  <!-- 错误提示 -->
  <div v-else-if="error" class="text-center py-12 text-red-500">
    {{ error }}
  </div>

  <!-- 无数据提示 -->
  <div v-else-if="Object.keys(myCouponMap).length === 0" class="text-center py-12">
    <p>暂无优惠券数据</p>
  </div>

  <!-- 优惠券列表 -->
  <ul class="dish-container" v-else>
    <li v-for="(myCoupon, index) in myCouponList" :key="myCoupon.id || index">
      <div class="dish-card" v-if="myCouponMap[myCoupon.id].hasCouponInfo">
        <div class="dish-info">
          <!-- mycoupon 字段 -->
          <div class="dish-name">
            <strong>优惠券编号:</strong> {{ myCouponMap[myCoupon.id].couponNumber }}
          </div>

          <!-- coupon 字段 -->
          <div class="dish-price">
            <strong>优惠金额:</strong> ¥{{ myCouponMap[myCoupon.id].couponInfo.couponPrice }}
          </div>
          <div class="dish-name">
            <strong>优惠券名称:</strong> {{ myCouponMap[myCoupon.id].couponInfo.couponName }}
          </div>
          <div class="dish-name">
            <strong>类型:</strong> {{ myCouponMap[myCoupon.id].couponInfo.couponType }}
          </div>

          <!-- 日期格式化（建议添加过滤器） -->
          <div class="dish-start-time">
            <strong>开始时间:</strong> {{ formatDate(myCouponMap[myCoupon.id].couponInfo.couponStartTime) }}
          </div>
          <div class="dish-end-time">
            <strong>结束时间:</strong> {{ formatDate(myCouponMap[myCoupon.id].couponInfo.couponEndTime) }}
          </div>
          <div class="dish-valid-day">
            <strong>有效期:</strong> {{ myCouponMap[myCoupon.id].couponInfo.couponValidDays }} 天
          </div>

          <!-- 状态显示 -->
          <div class="dish-status"
               :class="{
                   'text-green-600': myCouponMap[myCoupon.id].couponInfo.status === 0,
                   'text-gray-500': myCouponMap[myCoupon.id].couponInfo.status === 1,
                   'text-red-500': myCouponMap[myCoupon.id].couponInfo.status === 2
               }">
            <strong>状态:</strong> {{ formatStatus(myCouponMap[myCoupon.id].couponInfo.status) }}
          </div>
        </div>
      </div>

      <!-- 处理找不到对应 coupon 的情况 -->
      <div class="dish-card" v-else>
        <div class="dish-info text-red-500">
          优惠券信息已失效
        </div>
      </div>
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      myCouponList: [],
      couponList: [],
      myCouponMap: {},
      loading: true,
      error: null
    },
    mounted() {
      this.loadData();
    },
    methods: {
      async loadData() {
        try {
          // 加载 mycoupon
          const myCouponResponse = await axios.get("mycoupon");
          this.myCouponList = myCouponResponse.data.data || [];
          console.log("myCouponList:", this.myCouponList);

          // 加载 coupon
          if (this.myCouponList.length > 0) {
            const couponIds = this.myCouponList.map(item => item.couponId);
            const couponResponse = await axios.get("coupon", {
              params: { ids: couponIds.join(",") }
            });

            this.couponList = couponResponse.data.data || [];
            console.log("couponList:", this.couponList);

            // 构建映射表
            this.buildMyCouponMap();
          } else {
            console.log("myCouponList 为空");
          }
        } catch (error) {
          this.error = "加载失败，请重试";
          console.error("数据加载失败:", error);
        } finally {
          this.loading = false;
        }
      },

      buildMyCouponMap() {
        this.myCouponMap = this.myCouponList.reduce((acc, myCoupon) => {
          const coupon = this.couponList.find(
                  item => item.couponId === myCoupon.couponId
          );

          acc[myCoupon.id] = {
            ...myCoupon,
            couponInfo: coupon || {},
            hasCouponInfo: !!coupon
          };

          return acc;
        }, {});

        console.log("myCouponMap:", this.myCouponMap);
      },

      formatDate(dateString) {
        if (!dateString) return "";
        const date = new Date(dateString);
        return date.toLocaleDateString("zh-CN", {
          year: "numeric",
          month: "long",
          day: "numeric"
        });
      },

      formatStatus(status) {
        switch (status) {
          case 0: return "可用";
          case 1: return "已使用";
          case 2: return "已过期";
          default: return "未知";
        }
      }
    }
  });
</script>
</body>
</html>
